본문으로 건너뛰기

애니메이션과 상호작용

7. 애니메이션과 상호작용​

SVG는 애니메이션과 상호작용을 통해 동적인 그래픽을 만들 수 있습니다. animate, animateTransform, 그리고 JavaScript와 같은 도구를 사용하여 SVG 요소를 움직이거나, 색상을 변경하거나, 사용자의 입력에 반응하는 그래픽을 만들 수 있습니다. 이 섹션에서는 SVG에서 애니메이션과 상호작용을 구현하는 방법을 살펴보겠습니다.

7.1 SVG 애니메이션​

SVG 애니메이션은 <animate>, <animateTransform>, <set> 등의 태그를 사용하여 요소의 속성 변화를 정의합니다. 이러한 태그들은 특정 시간에 걸쳐 속성이 변하는 동적인 효과를 구현할 수 있게 해줍니다.

7.1.1 <animate> 태그​

<animate> 태그는 SVG 요소의 속성을 지정된 시간 동안 애니메이션화할 수 있습니다. 예를 들어, 색상, 크기, 투명도 등을 변화시킬 수 있습니다.

주요 속성:​
  • attributeName: 애니메이션화할 속성의 이름을 지정합니다.
  • from: 애니메이션 시작값.
  • to: 애니메이션 종료값.
  • dur: 애니메이션의 지속시간.
  • repeatCount: 애니메이션 반복 횟수 (indefinite로 설정하면 무한 반복).
예제: 색상 애니메이션​
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <animate
      attributeName="fill"
      from="blue"
      to="red"
      dur="2s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

7.1.2 <animateTransform> 태그​

<animateTransform> 태그는 SVG 요소에 변환(Transform) 애니메이션을 적용하는 데 사용됩니다. 이를 통해 요소를 회전(rotate), 이동(translate), 크기 조정(scale), 또는 기울이기(skew) 등의 변환 애니메이션을 구현할 수 있습니다. transform 속성에 대해 시간에 따라 변하는 애니메이션을 정의하는 것이 이 태그의 주된 목적입니다.

주요 속성​

  • attributeName: "transform"으로 설정해야 합니다.
  • type: 적용할 변환의 유형을 지정합니다. 주요 변환 유형은 다음과 같습니다:
    • translate: 요소를 x, y 방향으로 이동
    • scale: 요소의 크기 변경
    • rotate: 요소 회전
    • skewX: x축 방향으로 기울이기
    • skewY: y축 방향으로 기울이기
  • from: 애니메이션 시작 값
  • to: 애니메이션 종료 값
  • dur: 애니메이션의 지속 시간
  • repeatCount: 애니메이션 반복 횟수 (indefinite로 설정하면 무한 반복)

예제: 회전 애니메이션​

아래는 <animateTransform>을 사용하여 사각형이 5초 동안 360도 회전하는 애니메이션 예시입니다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="green">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 100 100"
      to="360 100 100"
      dur="5s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

7.2 SVG 상호작용​

SVG는 JavaScript를 통해 사용자와 상호작용하는 그래픽을 만들 수 있습니다. 마우스 클릭, 호버, 키보드 입력 등의 이벤트를 SVG 요소에 연결하여 동적인 인터랙티브 그래픽을 만들 수 있습니다. 이 섹션에서는 JavaScript 및 CSS를 이용해 SVG와 상호작용하는 방법을 소개합니다.

7.2.1 JavaScript를 이용한 상호작용​

JavaScript를 사용하여 SVG 요소에 이벤트 리스너를 추가하면 사용자의 입력에 따라 SVG 요소의 속성을 변경하거나 애니메이션을 적용할 수 있습니다. 마우스 클릭, 호버, 키보드 입력 등의 이벤트에 반응하는 SVG를 만들 수 있습니다.

예제: 클릭 시 색상 변경​

아래 예제는 사각형을 클릭할 때마다 색상이 변경되는 상호작용 SVG입니다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="50"
    y="50"
    width="100"
    height="100"
    fill="orange"
    onclick="changeColor(evt)"
  />
  <script>
    function changeColor(evt) { // 사각형의 색상을 파란색으로 변경
    evt.target.setAttribute('fill', 'blue'); }
  </script>
</svg>

7.2.2 <use> 태그와 동적 요소 복사​

<use> 태그는 SVG 내에서 정의된 요소를 반복적으로 재사용할 수 있게 해줍니다. 이를 사용하면 동일한 도형을 여러 번 그리거나, JavaScript를 사용해 동적으로 요소를 복사하여 그래픽을 생성할 수 있습니다.

  • 예제: <use>를 사용한 요소 복사
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 원형 정의 -->
  <circle id="myCircle" cx="50" cy="50" r="30" fill="green" />

  <!-- 원을 복사하여 사용 -->
  <use href="#myCircle" x="100" y="0" fill="blue" />
</svg>